<template>
  <div class="home">

    
    <div class="main">
      <router-view />
    </div>

    <div class="bottom">
      <van-tabbar v-model="active">
        <template v-for="item in navList" >
          <van-tabbar-item :key="item.icon" :icon="item.icon" @click="navTo(item.url)">{{item.name}}</van-tabbar-item>
        </template>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import {mixins} from "@/utils/mixins"
export default {
  mixins:[mixins],
  name: "home",
  components: {},
  
  data() {
    return {
      active: 0,
      navList:[
        { name:'首页',url:'/home',icon:'home-o' },
        { name:'分类',url:'/class',icon:'search' },
        { name:'购物车',url:'/cart' ,icon:'bag-o'},
        { name:'我的',url:'/mine',icon:'friends-o' },
      ]
    };
  },
  created(){
    this.curNav();
  },
  methods:{
    curNav(){
      const cur_path = this.$route.fullPath 
      for(let i in this.navList){
        const url = this.navList[i]
        if(url.url == cur_path){
          this.active = parseInt(i)
        }
      }
    }
  }
};
</script>
